<template>
  <div>
      <h1 style="text-align:center;">新增权限</h1> 
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="权限名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="权限路径 ">
              <el-input v-model="form.path"></el-input>
            </el-form-item>
            <el-form-item label="权限图标">
              <el-input v-model="form.icon"></el-input>
            </el-form-item>
            <el-form-item label="是否展示">
              <el-switch
                  v-model="form.isShow"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="父权限">
              <el-select v-model="form.parentId" placeholder="请选择活动区域">
                <!-- 没有权限 默认显示 无父权限 -->
                <el-option label="无父权限" value="0"></el-option>
                <!-- 遍历权限 -->
                <el-option v-for="auth in authList" :key="auth._id" :label="auth.name" :value="auth._id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form> 
  </div>
</template>

<script>
//导入请求权限列表 新增权限
import {AuthList,AuthAdd} from '@/request'
export default {
  data () {
    return {
        authList:[],
        form: {
            name: '',
            icon: '',
            path: '',
            parentId: '0',
            isShow: false
        }    
     } 
    },
  methods: {
    //定义方法 并在created调用
       async getAuthList() {
        let data = await AuthList()
        console.log(data);
        this.authList = data.data.authlist
       },
      //  发请求把 this.form 传过去 await等待一下
      async onSubmit() {
          // console.log('submit!');
       let data =  await AuthAdd(this.form)
      //  先解构 error_code msg
      let {error_code,msg} = data
      //判断是否新增成功
      if(error_code === 200){
        // 新增成功 响应并跳转到权限列表
         this.$message({
              type:'success',
              message: msg,
              duration: 1500,
              onClose :() => {
                this.$router.push('/auth/list')
              }
         })
        //  失败
       }else{
         this.$message({
              type:'error',
              message: msg, 
              duration: 1500,
         })
       }
      }  
    },
    //调用方法 - 在return 定义数据
    created() {
      this.getAuthList()
    }
}
</script>

<style>
    
</style>
